<template>
	<view class="content">
		<image class="bj-img" :src="beijingImg" mode="widthFix"></image>
		<view class="title-view" :style="{'margin-top':magringTopTitle+'px'}">
			<view style="flex: 1;display: flex;flex-direction: row;align-items: center;box-sizing: border-box;padding-left: 15px;">
				<image @click="goback" :src="leftjiantouBlack" style="width: 16px;" mode="widthFix"></image>
			</view>
			<view style="flex: 2;text-align: center;line-height: 35px;">
				{{title}}
			</view>
			<view style="flex: 1;"></view>
		</view>
		<view class="money-top-box">
			<view class="money-top-box-title">
				<view class="money-top-box-title-left">{{userInfo.money}}</view>
				<view class="money-goto" @click="gotoTixian">去提现</view>
			</view>
			<view class="money-tip-text">账户余额 (元)</view>
			<view class="money-wait-text">待结算佣金 (元)：<text>{{userInfo.sett_amount}}</text> </view>
		</view>
		<view class="money-list-box">
			<view class="money-list-nav">
				<view :class="['money-list-nav-item',selectIndex == index ? 'money-list-nav-item-select' : ''] " v-for="(item,index) in navTitle" :key='index' @click="selectNav" :data-index='index'>
					<view class="money-list-nav-title">{{item}}</view>
					<view class="money-list-nav-item-p"></view>
				</view>
			</view>
			<view class="money-list-ul">
				<view class="money-list-ul-li" v-if='selectIndex == 0' v-for="(item,index) in listArrayOne" :key='index'>
					<image class="money-list-ul-li-img" v-if="Number(item.after) - Number(item.before) > 0" :src="fanyongImg" mode=""></image>
					<image class="money-list-ul-li-img" v-if="Number(item.after) - Number(item.before) < 0" :src="tixianImg" mode=""></image>
					<view class="money-list-ul-li-content">
						<view class="money-list-ul-li-content-title">{{item.memo}}</view>
						<view class="money-list-ul-li-time">{{item.createtime_text}}</view>
					</view>
					<view class="money-list-ul-li-num" style="color: #00CB8B;" v-if="Number(item.after) - Number(item.before) > 0">+{{item.money}}</view>
					<view class="money-list-ul-li-num" v-if="Number(item.after) - Number(item.before) < 0">{{item.money}}</view>
				</view>
				<view class="money-list-ul-li" v-if='selectIndex == 1' v-for="(item,index) in listArrayTwo" :key='index'>
					<view class="money-list-ul-li-content-two">
						<view class="money-list-ul-li-content-title">物品回收</view>
						<view class="money-list-ul-li-time">{{item.add_time}}</view>
					</view>
					<view class="money-num-box">
						<view class="money-num-box-top">{{item.amount}}</view>
						<view class="money-num-box-bottom" v-if='item.type == 0' style="color: #FF8500;">{{item.type_text}}</view>
						<view class="money-num-box-bottom" v-if='item.type == 1'>{{item.type_text}}</view>
					</view>
				</view>
				<view class="money-list-ul-li" v-if='selectIndex == 2' v-for="(item,index) in listArrayThree" :key='index'>
					<view class="money-list-ul-li-content-two">
						<view class="money-list-ul-li-content-title">{{item.type_text}}</view>
						<view class="money-list-ul-li-time">{{item.add_time}}</view>
					</view>
					<view class="money-num-box">
						<view class="money-num-box-top">{{item.amount}}</view>
						<view class="money-num-box-bottom" v-if='item.status == 0' style="color: #FF8500;">{{item.status_text}}</view>
						<view class="money-num-box-bottom" v-if='item.status == 1'>{{item.status_text}}</view>
					</view>
				</view>
				<view v-if='listArrayOne.length == 0 && selectIndex == 0' style="text-align: center;line-height: 50px;margin-top: 200px;">~暂无数据~</view>
				<view v-if='listArrayTwo.length == 0 && selectIndex == 1' style="text-align: center;line-height: 50px;margin-top: 200px;">~暂无数据~</view>
				<view v-if='listArrayThree.length == 0 && selectIndex == 2' style="text-align: center;line-height: 50px;margin-top: 200px;">~暂无数据~</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	
	export default{
		data(){
			return{
				title:'我的钱包',
				navTitle:['收支明细','待结算佣金','提现明细'],
				leftjiantouBlack:baseUrl+'/uploads/static/image/left-jiantou.png',
				beijingImg:baseUrl+'/uploads/static/image/recovery_ recycler_my_money_bg@2x.png',
				magringTopTitle:0,
				fanyongImg:baseUrl+'/uploads/static/image/recovery_ recycler_my_money_icon_fanyong@2x.png',
				tixianImg:baseUrl+'/uploads/static/image/recovery_ recycler_my_money_icon_tixian@2x.png',
				selectIndex:0,
				page:1,
				userInfo:{},
				listArrayOne:[
					// {
					// 	"id": 9,
					// 	"user_id": 3,
					// 	"money": "2.00",//变更余额
					// 	"before": "129.00",
					// 	"after": "131.00",
					// 	"memo": "结算金额入账",//备注
					// 	"createtime": 1663914793,
					// 	"order_id": 28,
					// 	"createtime_text": "2022-09-23 14:33:13" //时间
					// },
					// {
					// 	"id": 9,
					// 	"user_id": 3,
					// 	"money": "-2.00",//变更余额
					// 	"before": "131.00",
					// 	"after": "129.00",
					// 	"memo": "提现",//备注
					// 	"createtime": 1663914793,
					// 	"order_id": 28,
					// 	"createtime_text": "2022-09-23 14:33:13" //时间
					// },
				],
				listArrayTwo:[
					// {
					// 	"id": 37,
					// 	"type": "0",//结算状态 0-结算中，1-已到账
					// 	"user_id": 3,
					// 	"amount": "1.00",//金额
					// 	"order_id": 0,
					// 	"add_time": "2022-09-20 10:38:27", // 时间
					// 	"type_text": "结算中"//结算状态
					// },
					// {
					// 	"id": 29,
					// 	"type": "1",
					// 	"user_id": 3,
					// 	"amount": "1.00",
					// 	"order_id": 0,
					// 	"add_time": "2022-09-19 15:21:23",
					// 	"type_text": "已到账"
					// },
					// {
					// 	"id": 28,
					// 	"type": "1",
					// 	"user_id": 3,
					// 	"amount": "1.00",
					// 	"order_id": 0,
					// 	"add_time": "2022-09-19 15:21:23",
					// 	"type_text": "已到账"
					// }
				],
				listArrayThree:[
					// {
					// 	"id": 13,
					// 	"type": "2",
					// 	"recycler_id": 3,
					// 	"amount": "2.00",//提现金额
					// 	"status": "0",//0结算中，1已到账
					// 	"add_time": "2022-09-27 11:41:54",//时间
					// 	"type_text": "提现到银行卡",//提现信息
					// 	"status_text": "结算中"//结算状态
					// },
				]
			}
		},
		onLoad() {
			//计算右上角高度
			 let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			 this.magringTopTitle = menuButtonInfo.top
			 this.userInfo = JSON.parse( uni.getStorageSync('userInfo') ).info
			 this.waitMx()
		},
		onReachBottom(){
			this.page = this.page+1
			if(this.selectIndex == 0){
				this.waitMx()
			}else if(this.selectIndex == 1){
				this.waitMoney()
			}else if(this.selectIndex == 2){
				this.waitTx()
			}
		},
		methods:{
			waitMx(){
				//收支明细
				let _this = this 
				http.getRecyclersMoneyLog({page:_this.page}).then((res)=>{
					if(res.data.code == 1){
						_this.listArrayOne = _this.listArrayOne.concat(res.data.data) 
					}
				})
			},
			waitMoney(){
				//待结算金额
				let _this = this
				http.getRecyclersSettLog({page:_this.page}).then((res)=>{
					if(res.data.code == 1){
						_this.listArrayTwo = _this.listArrayTwo.concat(res.data.data) 
					}
				})
			},
			waitTx(){
				//提现明细
				let _this = this
				http.getRecyclersWithdrawal({page:_this.page}).then((res)=>{
					if(res.data.code == 1){
						_this.listArrayThree = _this.listArrayThree.concat(res.data.data) 
					}
				})
			},
			selectNav(e){
				let index = e.currentTarget.dataset.index 
				this.selectIndex = index 
				if(this.selectIndex == 0){
					this.page = 1
					this.listArrayOne = []
					this.waitMx()
				}else if(this.selectIndex == 1){
					this.page = 1
					this.listArrayTwo = []
					this.waitMoney()
				}else if(this.selectIndex == 2){
					this.page = 1
					this.listArrayThree = []
					this.waitTx()
				}
			},
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
			gotoTixian(){
				uni.navigateTo({
					url:'/pages/my/withdrawal?type=1'
				})
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		font-family: 'PingFang Bold';
	}
	.bj-img{
		width: 100%;
		position: fixed;
		top: 0%;
		left: 0;
		z-index: -1;
	}
	.title-view{
		width: 100%;
		text-align: center;
		height: 35px;
		line-height: 35px;
		color: #fff;
		font-weight: bold;
		display: flex;
	}
	.money-top-box{
		width: 100%;
		margin-top: 30px;
		box-sizing: border-box;
		padding-left: 30px;
	}
	.money-top-box-title{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 53px;
		justify-content: space-between;
	}
	.money-top-box-title-left{
		font-size: 38px;
		color: #fff;
	}
	.money-goto{
		width: 70px;
		height: 36px;
		font-size: 14px;
		color: #fff;
		border-radius: 18px 0px 0px 18px;
		background: #fff;
		color: #00CB8B;
		text-align: center;
		line-height: 36px;
	}
	.money-tip-text{
		font-size: 14px;
		color: #CDFFEF;
	}
	.money-wait-text{
		width: 100%;
		margin-top: 15px;
		font-size: 14px;
		color: #CDFFEF;
	}
	.money-wait-text text{
		color: #fff;
	}
	.money-list-box{
		width: calc(100% - 24px);
		margin: 0 auto;
		margin-top: 25px;
		background-color: #fff;
		min-height: 50vh;
		border-radius: 15px 15px 0 0;
	}
	.money-list-nav{
		width: 100%;
		display: flex;flex-direction: row;
		align-items: center;
	}
	.money-list-nav-item{
		flex: 1;
		display: flex;flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.money-list-nav-title{
		width: 100%;
		height: 45px;
		text-align: center;
		line-height: 60px;
		color: #999;
		font-size: 16px;
	}
	.money-list-nav-item-select .money-list-nav-title{
		color: #333;
	}
	.money-list-nav-item-select .money-list-nav-item-p{
		display: block;
	}
	.money-list-nav-item-p{
		width: 30%;
		height: 2px;
		background-color: #00CB8B;
		border-radius: 2px;
		display: none;
	}
	.money-list-ul{
		width: 100%;
		box-sizing: border-box;
		padding: 0 22px;
	}
	.money-list-ul-li{
		width: 100%;
		height: 100px;
		border-bottom: 1px solid #f6f6f6;
		display: flex;flex-direction: row;
		align-items: center;
	}
	.money-list-ul-li-img{width: 44px;height: 45px;margin-right: 12px;}
	.money-list-ul-li-content{width: calc(100% - 100px);}
	.money-list-ul-li-content-two{width: calc(100% - 40px);}
	.money-list-ul-li-content-title{font-size: 16px;color: #333;}
	.money-list-ul-li-time{font-size: 14px;margin-top: 5px;color: #999;}
	.money-list-ul-li-num{font-size: 17px;color: #333;}
	.money-num-box{}
	.money-num-box-top{
		font-size: 17px;color: #333;
	}
	.money-num-box-bottom{
		font-size: 12px;color: #999;
		margin-top: 5px;
	}
</style>